@()(implicit request: play.api.mvc.RequestHeader)
@main("User manual") {
	<style>
			ul > li {
				line-height: 1.7em;
			}

			.paragraph {
				font-size: 15px;
				line-height: 1.8em;
			}

			.bold {
				font-weight: bold;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">User manual</h2>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-12">
			<p class="paragraph bold">
				Search
			</p>
			<p class="paragraph ">
				<img src="@routes.Assets.at("images/search1.png")" >
				<br>Figure1 the search page (displaying an example of Keyword type)
				<br>Step 1: choose a search type.
				<br>Step 2: enter your information.
				<br>Step 3: click search button.
				<br>Step 4: obtain a search result.
				<br>Note: you can use gene abbreviations, but it’s best to use the full gene name in keyword searches.
			</p>
			<p class="paragraph bold" >
				JBowse
			</p>
			<p class="paragraph ">
				<img src="@routes.Assets.at("images/jbrowse_1.png")" >
				<br>Figure 2 the JBowse page
				<br>Step 1: choose chromosome id and enter a genomic region.
				<br>Step 2: choose a target gene and click this gene.
				<br>Step 3: obtain the gene information.
			</p>
			<p class="paragraph bold" >
				Browse
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/browse_1.png")" >
				<br>Figure 3 the Browse page
				<br>Step 1: choose information columns to display.
				<br>Step 2: enter a Keyword.
				<br>Step 3: obtain search result.
			</p>
			<p class="paragraph bold" >
				BLAST
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/blast_1.png")" >
				<br>Figure 4 the BLAST page
				<br>Step 1: choose a BLAST database.
				<br>Step 2: choose a data format and enter query sequence or FASTA file.
				<br>Step 3: choose query database type.
				<br>Step 4: adjust E-value.
				<br>Step 5: choose target sequence number.
				<br>Step 6: click run button to obtain matching results.
			</p>
			<p class="paragraph bold" >
				Primer designer (Primer 3)
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/primer_1.png")" >
				<br>Figure 5 the Primer 3 page (displaying an example of genomic region type)
				<br>Step 1: choose a query type.
				<br>Step 2: choose a species.
				<br>Step 3: choose chromosome id.
				<br>Step 4: enter sequence position information.
				<br>Step 5: adjust primer design parameters.
				<br>Step 6: click run button to obtain candidate primers.
			</p>
			<p class="paragraph bold" >
				Sequence Fetch
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/seq_fetch_1.png")" >
				<br>Figure 6 the Sequence Fetch page (displaying an example of single sequence fetch)
				<br>Step 1: choose a database.
				<br>Step 2: choose a species.
				<br>Step 3: choose chromosome id.
				<br>Step 4: enter sequence region information.
				<br>Step 5: click search button to obtain result.
			</p>
			<p class="paragraph bold" >
				Enrichment analysis
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/enrich_analysis.png")" >
				<br>Figure 7 the Enrichment analysis page
				<br>Step 1: choose enrichment analysis database type.
				<br>Step 2: enter gene id.
				<br>Step 3: choose a background species.
				<br>Step 4: click run button to obtain enrichment result.
			</p>
			<p class="paragraph bold" >
				Multiple sequence alignment (Muscle)
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/muscle.png")" >
				<br>Figure 7 the Muscle page
				<br>Step 1: enter no less than two target sequence or a FASTA file.
				<br>Step 2: choose visualization.
				<br>Step 3: click run button to obtain multiple sequence alignment result.
			</p>
			<p class="paragraph bold" >
				Genome alignment (LASTZ)
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/lastz.png")" >
				<br>Figure 8 the LASTZ page
				<br>Step 1: enter target sequence or FATSA file.
				<br>Step 2: enter query sequence or FATSA file.
				<br>Step 3: click run to obtain genome alignment result.
			</p>
			<p class="paragraph bold" >
				Gene homology annotation (GeneWise)
			</p>
			<p class="paragraph ">
				<img style="max-width: 100%" src="@routes.Assets.at("images/genewise.png")" >
				<br>Figure 9 the GeneWise page
				<br>Step 1: enter a protein sequence.
				<br>Step 2: enter a DNA sequence.
				<br>Step 3: adjust parameters.
				<br>Step 4: click run button to obtain gene homology annotation result.
			</p>
		</div>

	</div>


	<script>
			$(function () {

			})

	</script>

}
